<template>
	<view style="padding: 20rpx;">
		
		<!-- 笔记的信息框 -->
		<view class="noteBox">
			
			<view class="noteDetail" style="margin-left: 5%;">
				<text style="font-size: 20px;">
					{{ this.noteTitle }}
				</text>
				
				<text style="font-size: 13px; color: grey; margin-top: 2%">
					{{ this.noteSummary }}
				</text>
			</view>
		</view>
		
		<!-- 标签 -->
		<view class="tagBox" :class="{'active' : tagInput}">
			<view class="delete-tag">
				<text style="margin-left: 4%; margin-right: auto;">标签</text>
				<text style="margin-right: 3%; color: blue;" @tap="clearTag" >清除标签</text>
			</view>
		
			<view class="tagList">
				<view v-for="(tag, index) in tagList" :key="index" 
					  class="tag-item" @click="onTagClick" @longpress="deleteTag(index)">
					{{ tag }}
				</view>
				
				<view class="tag-item" v-if="!tagInput" @click="addTag">+标签</view>
				<view v-else class="tag-item" style="width: 30%;">
					<input v-model="tagInputValue" focus=true 
						   @blur="blurtagList" @confirm="onTag(tagInputValue)"/>
				</view>
			</view>
		</view>
		
		<view class="tagBox">
			<text style="margin-left: 4%; margin-top: 5%;">可见范围</text>
			
			<radio-group class="optionBtn" @change="selectVisibleScope">
				<label class="radio-tag">
					<radio value="self":checked="selectedScope === 'self'"></radio>
					仅自己
				</label>
				<label class="radio-tag">
					<radio value="friends":checked="selectedScope === 'friends'"></radio>
					仅好友
				</label>
				<label class="radio-tag">
					<radio value="public":checked="selectedScope === 'public'"></radio>
					所有人
				</label>
			</radio-group>
			
			<text style="margin-left: 4%; margin-top: 8%;">共享编辑</text>
			
			<radio-group class="optionBtn" @change="selectShareScope">
				<label class="radio-tag">
					<radio value="self":checked="selectedShare === 'self'"></radio>
					仅自己
				</label>
				<label class="radio-tag">
					<radio value="friends":checked="selectedShare === 'friends'"></radio>
					仅好友
				</label>
				<label class="radio-tag">
					<radio value="public":checked="selectedShare === 'public'"></radio>
					所有人
				</label>
			</radio-group>
		</view>
		
		<view>
			<button style="	position: fixed;
							bottom: 1.5%;
							width: 94%;" 
					@click = "publishNote">发布</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	
	export default {
		data() {
			return {
				tagList:[
					"演示标签1",
					"演示标签2"
				],
				user:[
					
				],
				tagInput : false,
				tagInputValue : '',
				
				selectedScope:'self',	//可见范围选择
				selectedShare:'friends',	//共享编辑选择
				noteTitle: '',
				noteSummary: '',
				noteType: 0,
				fileName: ''
			}
		},
		
		onLoad(option){
			let upath = wx.env.USER_DATA_PATH;
			let draftpath = upath + "/draft";
			let that = this;
			this.user = uni.getStorageSync('xm-user');
			uni.getFileSystemManager().readFile({
				filePath : draftpath + "/" + option.FileName,
				encoding : 'utf-8',
				position : 0,
				
				success: function(res){
					let tmp = res.data;
					let arr = tmp.split("#<<<<<!*&*!>>>>>#");
					that.noteTitle = arr[0];
					that.noteSummary = that.clearHtml(arr[1]).substring(0,45);
					//console.log(that.noteTitle);
					//console.log(arr[0]);
					//that.noteContent = arr[1];
					that.noteType = option.type;
					that.fileName = option.FileName;
				},
				fail(res){
					console.error(res);
				}
			})
		},
		
		methods: {
			clearHtml(msg) {
	            var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
	            msg = msg.replace(/[|]*\n/, ''); //去除行尾空格
	            msg = msg.replace(/&npsp;/gi, ''); //去掉npsp
	            return msg;
			},
			
			clearTag(){
				uni.showModal({
				    title: '提示',
				    content: '确定清除所有标签?',
				    success: (res) => {
						if (res.confirm) {
							if(this.tagList == ''){
								uni.showToast({
									icon: 'error',
									title: '标签已为空',
									duration: 1000
								});
							} else {
								this.tagList.splice(0, this.tagList.length);
								uni.setStorageSync('tagList', this.tagList);
								
								uni.showToast({
									icon:'success',
									title:'清除成功',
									duration:800
								})
								
								console.log('清除标签成功');
							}
						} else if (res.cancel) {
							console.log('用户取消');
				        }
				    }
				});
			},
			
			onTagClick() {
				this.tagInput = false;
			},
			
			onTag(query){
				
				// 设定最大输入长度
				const maxLength = 10;
				if (query.length > maxLength) {
				    query = query.substring(0, maxLength);
				}
				if (query !== '') {
					this.savetagList(query);
				}
			},
			
			addTag(){
				this.tagInput = true;
			},
			
			blurtagList(){
				this.tagInput = false;
				this.tagInputValue = '';
			},
			
			savetagList(query){
				this.tagInput = false;
				if(this.tagInputValue !== ''){
					
					this.tagList.push(query);
					// 保存到本地存储
					uni.setStorageSync('tagList', this.tagList);
				}
				this.tagInputValue = '';
			},
			
			deleteTag(index){
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该标签吗?',
				    success: (res) => {
						if (res.confirm) {
							this.tagInput = false;
							this.tagList.splice(index , 1);
							uni.setStorageSync('tagList', this.tagList);
							console.log('删除成功');
						} else if (res.cancel) {
							console.log('用户取消删除');
				        }
				    }
				});
			},
			
			
			//选择可见范围
			selectVisibleScope(e){
				this.selectedScope = e.detail.value;
			},
			
			//共享编辑选择
			selectShareScope(event){
				this.selectedShare = event.detail.value;
			},
			
			//发布笔记
			publishNote(){
				let tagStr = '';
				this.tagList.forEach(element => {
					tagStr += element;
					tagStr += ',';
				});
				
				let upath = wx.env.USER_DATA_PATH;
				let draftpath = upath + "/draft";
				let that = this;
				let time = new Date();
				let realMonth = time.getMonth() + 1;
				
				let form0 = { 
					user_id: this.user.id,
					title: this.noteTitle,
					note_tags: tagStr,
					type: this.noteType,
					file: this.fileName,
					summary: this.noteSummary,
					visible_scope: this.selectedScope,
					modify_scope: this.selectedShare,
					create_time: time.getFullYear() + "/" +
								realMonth + "/" +
								time.getDate() + " " +
								time.getHours() + ":" +
								time.getMinutes()
				}
				
				let form = JSON.parse(JSON.stringify(form0));
				console.log(form);
				
				uni.request({
					url: config.baseUrl + '/note/insert',
					data: form,
					method:'POST',
					
					
					success:(res) =>{
						console.log("请求成功",res);
						uni.uploadFile({
							url: config.baseUrl + '/note/takeFile',
							filePath: draftpath + "/" + that.fileName,
							name: 'file',
							success(res){
								console.log(res);
							}
						})
						
						uni.switchTab({
							url:'/pages/notes/notes'
						})
						
					},
					fail:(err) => {
						console.log("请求失败",err);
					}
				});
				
			}
			
		}
	}
</script>

<style>
	/* 笔记框处理 */
	.noteBox{
		display: flex;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
	}
	
	.noteDetail{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	/* 标签框处理 */
	
	.tagBox{
		display: flex;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
		flex-direction: column;
	}
	
	.delete-tag{
		margin-top: 5%;
		display: flex;
		width: 100%;
	}
	
	.tagList{
		display: flex;
		flex-wrap: wrap;
		margin-left: 2%;
		margin-bottom: 8%;
	}
	
	.tag-item{
		padding: 10px;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
		border-radius: 20rpx;
	}
	
	.optionBtn{
		display: flex;
		padding: 10px;
		justify-content: space-around;
	}

</style>
